{% extends "xadmin/base_site.html" %}
{% load i18n %}
{% load url from future %}
{% load xadmin_tags %}
{% load crispy_forms_tags %}

{% block breadcrumbs %}
{% if account_view %}
<ul class="breadcrumb">
  <link href="/websys/static/xadmin/vendor/bootstrap-table/css/bootstrap-table.min.css" type="text/css" media="screen" rel="stylesheet" />
<li><a href="{% url 'xadmin:index' %}">{% trans 'Home' %}</a></li>
  <li class="active"> {{ title }} </li>
</ul>
{% else %}
<ul class="breadcrumb">
  <li><a href="{% url 'xadmin:index' %}">{% trans 'Home' %}</a></li>
  <li>
    {% if has_view_permission %}
    <a href="{% url opts|admin_urlname:'changelist' %}">{{ opts.verbose_name_plural|capfirst }}</a>
    {% else %}{{ opts.verbose_name_plural|capfirst }}{% endif %}
  </li>
  <li><a href="{% url opts|admin_urlname:'change' original.pk %}">{{ original|truncatewords:"18" }}</a></li>
  <li class="active">{% trans 'Change password' %}</li>
</ul>
{% endif %}
{% endblock %}

{% block content-nav %}
{% endblock %}
{% block content %}
<!--页面设计在这儿....{{ serverval }}-->
    <style>
    .tb_tr{height: 50px; border:gainsboro 1px  double;}
    .tb_td{height: 50px; border: gainsboro 1px double; width:80px;}
    .tb_data{width:90%;border:gainsboro 1px  double;}
    </style>
    <table style="width: 100%">
{#        <tr class="tb_tr" id="tr_day" >#}
{#            <td class="tb_td">日期：</td>#}
{#            <td>#}
{#                <input type="text" id="day_0" class="datepicker" placeholder="请选择日期" />#}
{##}
{#                <input type="text" id="day_1" class="datepicker" style="display: none;" placeholder="请选择日期" />#}
{#            </td>#}
{#        </tr>#}

         <tr class="tb_tr">
            <td class="tb_td">渠道：</td>
            <td>
                <select id="sel_qudao" multiple="true" style="width: 150px;height: 120px">
                    <option value="all" selected="selected">全部</option>
                   {% for key,value in channel.items %}
                            <option value="{{ value }}">{{ key }}</option>
                    {% endfor %}
                </select><span>注:可按住Ctrl进行多选!</span>
            </td>
        </tr>
        <tr class="tb_tr">
            <td class="tb_td">服务器：</td>
            <td>
                <select id="sel_pf">
                    <option value="all" selected="selected">全部</option>
                    {% for item in htmldata.apps %}
                            <option value="{{ item.pf }}">{{ item.name }}</option>
                    {% endfor %}
                </select>
            </td>
        </tr>
        <tr class="tb_tr">
            <td class="tb_td">查询结果</td>
            <td>
                当前在线=<label id="now_online"></label>&nbsp;&nbsp;&nbsp;&nbsp;
{#                30天最高在线=<label id="thirty_online"></label>#}
            </td>
        </tr>
    <tr class="tb_tr">
            <td class="tb_td"></td>
            <td><label id="la_link"> {{links}}</label>&nbsp;&nbsp;<input type="button" id="bt_copy" value="查询" onclick="toSearch()"></td>
        </tr>
    <tr class="tb_online">
        <td>
        <div id="page1">
        <iframe name="ifrmname" id="page2" align="center" width="1300%" height="1000" src="/websys/static/onlie_info/index.html"  frameborder="no" border="0" marginwidth="0" marginheight="0" scrolling="no"></iframe>
        </div>
        </td>
    </tr>

    </table>
{#    <tr class="tb_tr">#}
{#            <td  colspan="2">#}
{#                <table data-toggle="table" data-height="100%"  data-pagination="true" id="table_report" style="width:90%;border:gainsboro 1px  double;">#}
{#                     <thead>#}
{#                        <tr>#}
{#                            <th  data-field="hour">时间</th>#}
{#                            <th  data-field="count">在线人数</th>#}
{#                        </tr>#}
{#                    </thead>#}
{#                </table>#}
{#            </td>#}
{#    </tr>#}
<script type="text/javascript" src="/websys/static/xadmin/vendor/bootstrap-datepicker/js/bootstrap-datepicker.js"></script>
    <script src="/websys/static/xadmin/vendor/bootstrap-datepicker/js/locales/bootstrap-datepicker.zh-CN.js"></script>
    <script src="/websys/static/xadmin/vendor/bootstrap-table/js/bootstrap-table.min.js"></script>
    <script src="/websys/static/xadmin/vendor/bootstrap-table/js/bootstrap-table-locale-all.min.js"></script>
    <script>


    var data=[];
    var data_max = 60;
    function toSearch()
    {


        var t_cl=$("#sel_qudao").val();
        if(t_cl=='')
        {
            alert('渠道不能为空');
            return
        }

        var t_pf=$('#sel_pf').val();

        $.post('/xadmin/ajax_report/online', {"pf":t_pf,"channel":t_cl}, function(result){
            //alert(result.ret);
            if(result.code == 0)
            {

                data=[];
                document.getElementById('now_online').innerText=result.online_count;
                //document.getElementById('thirty_online').innerText=result.thirty_online;
                    //console.log($(id).attr('serverip'))
                data.push(result.datas.today);
                data.push(result.datas.before);
                data_max=result.max;
                document.getElementById("page2").contentWindow.chart();

            }else
            {
                alert(result.msg + "("+result.code +")")
            }
         }, "json")


    }
    toSearch();
    </script>
{% endblock %}